@media (min-width: 998px) {
    .mobile-header{
        display: none;
    }
}
/* tablet vs mobile */
@media (max-width: 997.98px) {
    .navbar-list{
        display: none;
    }
    .header__logo{
       position: absolute;
       left: 50%;
       transform: translate(-50%, -50%);
    }
    .header-menu__icon{
        position: absolute;
        top: 43px;
        left: 30px;
        color: #fff;
        font-size: 25px;
        cursor: pointer;
    }
    .overlay{
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        z-index: 1;
        transition: 0.3s;
    }
    #menu-check:checked ~ .overlay {
        opacity: 1;
        visibility: visible;
    }
    .drawer {
        position: fixed;
        inset: 0 40% 0 0;
        background-color: #221111;
        transform: translateX(-100%);
        transition: 0.3s;
        z-index: 2;
        padding: 30px;
    }
    #menu-check:checked ~ .drawer {
        transform: translateX(0);

    }
    .mobile-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .close__menu{
        height: 20px;
        color: #fff;
    }
    .close__menu:hover{
        cursor: pointer;
        opacity: 0.9;
    }
    .mobile-nav{
        margin-top: 15px;
    }
    .navbar__link{
        display: block;

    }
    .navbar__link:hover{
        background-color: rgb(10, 26, 11);
    }
    .hero {
        flex-direction: column-reverse;
        row-gap: 50px;
    }
    .hero__content{
        width: 78%;
    }
    .hero__booking{
        justify-content: center;
    }
    .hero__img--small{
        display: none;
    }
    .service__row{
        flex-direction: column;
    row-gap: 30px;
    }
    .service-item{
        width: 90%;
        margin: 0 auto;
    }
    .service__btn{
        display: block;
        margin: 0 auto;
    }
    .work-content{
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
  
    .work {
        text-align: center;
    }
    .work__desc{
        margin: 18px auto 0;
    }
    .about-row {
        flex-direction: column;
        row-gap: 45px;
    }
    .about__media {
    width: 100%;
    }
    .about__img-big{
        width: 80%;
        margin: 0 auto;
    }
    .about__img-small{
        display: none;
    }
    .about-content{
        width: 80%;
        text-align: center;
    }
    /* teamlist */
    .team__list{
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }
    .team__img{
        margin: 0 auto;
    }
    .install__img {
    display: none;
    }
    .install__content{
        max-width: 90%;
        margin: 0 auto;
    }
    /* blog */
    .blog-body{
        flex-direction: column-reverse;
    row-gap: 30px;
    }
    .blog__list {
    width: 80%;
    }
    .blog__content{
        width: 100%;
        text-align: center;
    }
    .blog__heading{
        max-width: 100%;
    }
    .blog__move{
        justify-content: center;
    }
    .blog-item{
        margin: 0 auto  ;
    }
    /* appointment */
    .appointment__desc{
        width: 100%;
    }
    /* footer */

}
/* tablet  */
@media (min-width:768px) and (max-width: 997.98px){
    .footer__column--hiding{
        display: none;
    }
    .hero__img--big {
        width: 100%;
        height: auto;
    }
   
    .show-on-mobile{
        display: none;
    }
    .footer__top{
        grid-template-columns: 0.5fr 0.5fr 1fr;
    }
}
/* mobile */
@media (max-width: 767.98px) {
   .action {
    display: none;
   }
   .header-menu__icon{
    top: 20px;
   }
   .navbar__item{
    list-style: none;
   }
   .drawer{
    inset: 0 20% 0 0;
    padding: 45px;
   }
   .theroad{
    border-top: 1px solid #6b6868;
    margin: 16px 0;
   }
   /* hero */
   .hero__img--big{
    width: 100%;
    height: auto;
   }
   .hero__content{
    word-wrap: 93%;
   }
   .hero__heading{
    font-size: 4rem;
   }
   .hero__booking{
    flex-direction: column;
    row-gap: 30px;
   }
   /* service */
   .service {
    padding: 40px 0;
}
    .section-heading{
        font-size: 3rem;
    }
    .service__img{
        width: 100%;
        height: auto;
    }
    .service__desc {
        width: 100%;
    }
    /* work */
    .work{
        padding: 40px 0;
    }
    .section-desc{
        font-size: 1.3rem;
    }
    .work__desc {
        width: 100%;
    }
    .work__item {
        padding: 15px;}
        /* about */
        .about {
            padding: 20px 0;
            margin: 20px 0;
        }

        /* team */
        .team {
            padding: 20px 0;
        }
        .team__list{
            grid-template-columns: 1fr;
            row-gap: 30px;
        }
        /* install */
        .install {
            padding: 20px 0;
            margin-top: 20px;
        }
        .inner-install{
            padding: 0px 20px;
        }
        .install__content{
            max-width: 100%;
        }
        /* blog */
        .blog {
            padding: 40px 0;
        }
        .blog__list{
            grid-template-columns: 1fr;
            row-gap: 30px;
            width: 100%;
        }
        /* appointment */
        .appointment__inner {
            padding: 40px 0;
            text-align: center;
        }
/* footer */
.footer__top{
    grid-template-columns: 1fr;
    row-gap: 30px;
}
.footer__bot{
    margin-top: 15px;
}

}